<template>
    <div id="app">
        <div>
            <span>姓名:</span>
            <input type="text" v-model="name"/>
        </div>
        <div>
            <span>年龄:</span>
            <input type="number" v-model="age"/>
        </div>
        <div>
            <span>性别:</span>
            <select v-model="sex">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </div>
        <div>
            <button @click="add">添加/修改</button>
        </div>
        <div>
            <table border="1" cellpadding="10" cellspacing="0">
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
                <tr v-for="item in list" :key="item.id">
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.age }}</td>
                    <td>{{ item.sex }}</td>
                    <td>
                        <button @click="del(item.id)">删除</button>
                        <button @click="edit(item.id)">编辑</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            name:'',
      age:'',
      sex:'男',
      list:[{id:+new Date,name:'哈哈哈',age:18,sex:'男',}],
      flag:''
        }
    },
    methods:{
        add(){
            if(this.name === '' && this.age === ''){
                alert('请输入内容')
            }else{
                if(this.flag === ''){
                this.list.unshift({
                id: +new Date(),
                name:this.name,
                age:this.age,
                sex:this.sex,
            })
               }else{
                this.flag.name = this.name
                this.flag.age = this.age
                this.flag.sex = this.sex
               }
               console.log(this.flag);
            this.name = ''
            this.age = ''
            this.sex = '男'
            this.flag = ''
            
        }
            },
               
        edit(id){
            // console.log(id);
            // 通过id找到被编辑的元素
            const item = this.list.find(item => item.id === id)
            // console.log(item);
            this.name = item.name,
            this.age = item.age,
            this.sex = item.sex
            
        },
        del(id){
            this.list = this.list.filter(item => item.id !== id)
        }
    }

}
</script>
